<!DOCTYPE html>
<html>
<head>
    

    

    
<!-- Baidu Tongji -->
<script>var _hmt = _hmt || []</script>
<script async src="//hm.baidu.com/hm.js?a7c05ce530152d9866930ef4850ee566"></script>
<!-- End Baidu Tongji -->




    <meta charset="utf-8">
    
    
    
    <title>jQuery入门(二) | 神奇的鸭鸭の码农库 | 新知识要不断的总结记录成笔记，要多写，多画，能够清晰透彻的将知识讲给别人听，才是达到理解的层次。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#765959">
    
    
    <meta name="keywords" content="前端">
    <meta name="description" content="学习准备画圈部分为本次笔记的内容：jQuery API 案例源码下载 筛选选择器可以完成的功能，筛选也提供相同函数。  选择器 :first $(“div:first”) 直接获得第一个div (永远只能操作第一个) 筛选 first() $(“div”).first() 先获得所有div，从所有中再筛选一个 (可以操作第一个，也可以操作所有)  过滤   语法 描述     eq(index -">
<meta name="keywords" content="前端">
<meta property="og:type" content="article">
<meta property="og:title" content="jQuery入门(二)">
<meta property="og:url" content="http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/index.html">
<meta property="og:site_name" content="神奇的鸭鸭の码农库">
<meta property="og:description" content="学习准备画圈部分为本次笔记的内容：jQuery API 案例源码下载 筛选选择器可以完成的功能，筛选也提供相同函数。  选择器 :first $(“div:first”) 直接获得第一个div (永远只能操作第一个) 筛选 first() $(“div”).first() 先获得所有div，从所有中再筛选一个 (可以操作第一个，也可以操作所有)  过滤   语法 描述     eq(index -">
<meta property="og:image" content="http://om6odecqr.bkt.clouddn.com/jQuery%E7%AC%94%E8%AE%B02%E6%B6%89%E5%8F%8A%E5%86%85%E5%AE%B9.png">
<meta property="og:image" content="http://om6odecqr.bkt.clouddn.com/jQuery%28%E4%BA%8C%29%E8%B5%84%E6%96%99.png">
<meta property="og:updated_time" content="2017-11-13T14:17:25.621Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="jQuery入门(二)">
<meta name="twitter:description" content="学习准备画圈部分为本次笔记的内容：jQuery API 案例源码下载 筛选选择器可以完成的功能，筛选也提供相同函数。  选择器 :first $(“div:first”) 直接获得第一个div (永远只能操作第一个) 筛选 first() $(“div”).first() 先获得所有div，从所有中再筛选一个 (可以操作第一个，也可以操作所有)  过滤   语法 描述     eq(index -">
<meta name="twitter:image" content="http://om6odecqr.bkt.clouddn.com/jQuery%E7%AC%94%E8%AE%B02%E6%B6%89%E5%8F%8A%E5%86%85%E5%AE%B9.png">
    
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/css/style.css?v=1.4.3">
    <script>window.lazyScripts=[]</script>
</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">神奇的鸭鸭</h5>
          <a href="mailto:702038338@qq.com" title="702038338@qq.com" class="mail">702038338@qq.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                归档
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://git.oschina.net/magic_duck" target="_blank" >
                <i class="icon icon-lg icon-gg-circle"></i>
                码云
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://www.zhihu.com/people/shen-qi-de-ya-ya" target="_blank" >
                <i class="icon icon-lg icon-twitter"></i>
                知乎
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/404.html"  >
                <i class="icon icon-lg icon-link"></i>
                404页面测试
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">jQuery入门(二)</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">jQuery入门(二)</h1>
        <h5 class="subtitle">
            
                <time datetime="2017-08-01T14:08:00.000Z" itemprop="datePublished" class="page-time">
  2017-08-01
</time>


            
        </h5>
    </div>

    

</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#学习准备"><span class="post-toc-number">1.</span> <span class="post-toc-text">学习准备</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#筛选"><span class="post-toc-number">2.</span> <span class="post-toc-text">筛选</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#过滤"><span class="post-toc-number">2.1.</span> <span class="post-toc-text">过滤</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#查找"><span class="post-toc-number">2.2.</span> <span class="post-toc-text">查找</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#串联"><span class="post-toc-number">2.3.</span> <span class="post-toc-text">串联</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#事件"><span class="post-toc-number">3.</span> <span class="post-toc-text">事件</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#常见事件"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">常见事件</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#页面加载"><span class="post-toc-number">3.2.</span> <span class="post-toc-text">页面加载</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#事件绑定"><span class="post-toc-number">3.3.</span> <span class="post-toc-text">事件绑定</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#处理"><span class="post-toc-number">3.3.1.</span> <span class="post-toc-text">处理</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#委派"><span class="post-toc-number">3.3.2.</span> <span class="post-toc-text">委派</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#切换"><span class="post-toc-number">3.3.3.</span> <span class="post-toc-text">切换</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#事件案例"><span class="post-toc-number">3.4.</span> <span class="post-toc-text">事件案例</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#文字提示跟随鼠标"><span class="post-toc-number">3.4.1.</span> <span class="post-toc-text">文字提示跟随鼠标</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#简单图片放大镜效果"><span class="post-toc-number">3.4.2.</span> <span class="post-toc-text">简单图片放大镜效果</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#效果-动画"><span class="post-toc-number">4.</span> <span class="post-toc-text">效果|动画</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#基本"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">基本</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#滑动"><span class="post-toc-number">4.2.</span> <span class="post-toc-text">滑动</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#淡入淡出"><span class="post-toc-number">4.3.</span> <span class="post-toc-text">淡入淡出</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#ajax-请求"><span class="post-toc-number">5.</span> <span class="post-toc-text">ajax 请求</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#servlet需要注意的事项"><span class="post-toc-number">5.1.</span> <span class="post-toc-text">servlet需要注意的事项</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#load-方法示例"><span class="post-toc-number">5.2.</span> <span class="post-toc-text">$.load()方法示例</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#get-方法示例"><span class="post-toc-number">5.3.</span> <span class="post-toc-text">$.get()方法示例</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#post-方法示例"><span class="post-toc-number">5.4.</span> <span class="post-toc-text">$.post()方法示例</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#ajax-方法实例-强大"><span class="post-toc-number">5.5.</span> <span class="post-toc-text">$.ajax()方法实例(强大)</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#动态加载div"><span class="post-toc-number">5.6.</span> <span class="post-toc-text">动态加载div</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#动态滚动"><span class="post-toc-number">5.7.</span> <span class="post-toc-text">动态滚动</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#其他"><span class="post-toc-number">6.</span> <span class="post-toc-text">其他</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#表单序列化"><span class="post-toc-number">6.1.</span> <span class="post-toc-text">表单序列化</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#事件冒泡"><span class="post-toc-number">6.2.</span> <span class="post-toc-text">事件冒泡</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#浏览器默认动作："><span class="post-toc-number">6.3.</span> <span class="post-toc-text">浏览器默认动作：</span></a></li></ol></li></ol>
        </nav>
    </aside>
    
<article id="post-jQuery_primary_02"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">jQuery入门(二)</h1>
        <div class="post-meta">
            <time class="post-time" title="2017年08月01日 22:08" datetime="2017-08-01T14:08:00.000Z"  itemprop="datePublished">2017-08-01</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


            

        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h2 id="学习准备"><a href="#学习准备" class="headerlink" title="学习准备"></a>学习准备</h2><p>画圈部分为本次笔记的内容：<a href="http://jquery.cuishifeng.cn/" target="_blank" rel="external">jQuery API</a><br><img src="http://om6odecqr.bkt.clouddn.com/jQuery%E7%AC%94%E8%AE%B02%E6%B6%89%E5%8F%8A%E5%86%85%E5%AE%B9.png" alt="jQueryAPI截图"></p>
<p><a href="http://download.csdn.net/detail/sq_yaya/9918135" target="_blank" rel="external">案例源码下载</a><br><img src="http://om6odecqr.bkt.clouddn.com/jQuery%28%E4%BA%8C%29%E8%B5%84%E6%96%99.png" alt="jQuery(一)资料"></p>
<h2 id="筛选"><a href="#筛选" class="headerlink" title="筛选"></a>筛选</h2><p>选择器可以完成的功能，筛选也提供相同函数。</p>
<ul>
<li>选择器 :first $(“div:first”) 直接获得第一个div (永远只能操作第一个)</li>
<li>筛选 first() $(“div”).first() 先获得所有div，从所有中再筛选一个 (可以操作第一个，也可以操作所有)</li>
</ul>
<h3 id="过滤"><a href="#过滤" class="headerlink" title="过滤"></a>过滤</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">eq(index -index)</td>
<td style="text-align:left">index正数从0(-index从-1) 开始获得指定索引的元素</td>
</tr>
<tr>
<td style="text-align:left">first()</td>
<td style="text-align:left">获得第一个</td>
</tr>
<tr>
<td style="text-align:left">last()</td>
<td style="text-align:left">获得最后一个</td>
</tr>
<tr>
<td style="text-align:left">hasClass(class)</td>
<td style="text-align:left">判断是否时指定class</td>
</tr>
<tr>
<td style="text-align:left">filter(expr obj ele fn)</td>
<td style="text-align:left">筛选出与指定表达式匹配的元素集合</td>
</tr>
<tr>
<td style="text-align:left">is(expr obj ele fn)</td>
<td style="text-align:left">判断是否有元素符合</td>
</tr>
<tr>
<td style="text-align:left">map(callback)</td>
<td style="text-align:left">jQuery对象拆分成jQuery对象数组</td>
</tr>
<tr>
<td style="text-align:left">has(expr ele)</td>
<td style="text-align:left">保留特定后代元素，去掉为指定的后代元素</td>
</tr>
<tr>
<td style="text-align:left">not(expr ele fn)</td>
<td style="text-align:left">将指定内容删除</td>
</tr>
<tr>
<td style="text-align:left">slice(start,[end])</td>
<td style="text-align:left">截取元素，【2,4) -&gt;2,3</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择索引值等于3的元素"  id="b1"/&gt;</span></div><div class="line">	$(<span class="string">"#b1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"div"</span>).eq(<span class="number">3</span>).css(<span class="string">"background-color"</span>, <span class="string">"#ff0"</span>)</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择第一个div元素"  id="b2"/&gt;</span></div><div class="line">	$(<span class="string">"#b2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"div"</span>).first().css(<span class="string">"background-color"</span>, <span class="string">"#ff0"</span>).show();</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择最后一个div元素"  id="b3"/&gt;</span></div><div class="line">	$(<span class="string">"#b3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"div"</span>).last().css(<span class="string">"background-color"</span>, <span class="string">"#ff0"</span>).show();</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" id=one div样式是否是one"  id="b4"/&gt;</span></div><div class="line">	$(<span class="string">"#b4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		alert( $(<span class="string">"div#one"</span>).hasClass(<span class="string">"one"</span>) );</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择class为none的所有div"  id="b5"/&gt;</span></div><div class="line">	$(<span class="string">"#b5"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"div.none"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#ff0"</span>).show();</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 样式为hide div 下一个兄弟是否是span"  id="b6"/&gt;</span></div><div class="line">	$(<span class="string">"#b6"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		alert( $(<span class="string">"div.hide"</span>).next().is(<span class="string">"span"</span>) );</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择所有div中含有div的"  id="b7"/&gt;</span></div><div class="line">	$(<span class="string">"#b7"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"div"</span>).has(<span class="string">"div"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#ff0"</span>).show();</div><div class="line">	&#125;);	</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择样式为one div 子元素中没有title属性的父div"  id="b8"/&gt;</span></div><div class="line">	$(<span class="string">"#b8"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"div.one"</span>).children().not(<span class="string">"[title]"</span>).parent().css(<span class="string">"background-color"</span>, <span class="string">"#ff0"</span>).show();</div><div class="line">	&#125;);	</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择所以号为3,4的div"  id="b9"/&gt;</span></div><div class="line">	$(<span class="string">"#b9"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"div"</span>).slice(<span class="number">3</span>,<span class="number">5</span>).css(<span class="string">"background-color"</span>, <span class="string">"#ff0"</span>).show();</div><div class="line">	&#125;);	</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="查找"><a href="#查找" class="headerlink" title="查找"></a>查找</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">&lt;A&gt;</div><div class="line">    &lt;B&gt;</div><div class="line">        &lt;C&gt;<span class="xml"><span class="tag">&lt;/<span class="name">C</span>&gt;</span></span></div><div class="line">        &lt;D&gt;<span class="xml"><span class="tag">&lt;/<span class="name">D</span>&gt;</span></span></div><div class="line">        &lt;E&gt;<span class="xml"><span class="tag">&lt;/<span class="name">E</span>&gt;</span></span></div><div class="line">        &lt;F&gt;<span class="xml"><span class="tag">&lt;/<span class="name">F</span>&gt;</span></span></div><div class="line">    &lt;<span class="regexp">/B&gt;</span></div><div class="line"><span class="regexp">&lt;/</span>A&gt;</div></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">B.children([…])</td>
<td style="text-align:left">获得所有的子元素 CDEF</td>
</tr>
<tr>
<td style="text-align:left">A.find(D)</td>
<td style="text-align:left">从指定区域查询指定元素，D</td>
</tr>
<tr>
<td style="text-align:left">D.next()</td>
<td style="text-align:left">获得下一个兄弟 E</td>
</tr>
<tr>
<td style="text-align:left">D.nextAll()</td>
<td style="text-align:left">获得后面的所有兄弟 DEF</td>
</tr>
<tr>
<td style="text-align:left">E.prev()</td>
<td style="text-align:left">获得上一个兄弟 D (previous)</td>
</tr>
<tr>
<td style="text-align:left">E.prevAll()</td>
<td style="text-align:left">获得前面的所有兄弟 CD</td>
</tr>
<tr>
<td style="text-align:left">E.siblings()</td>
<td style="text-align:left">获得E的所有兄弟 CDF</td>
</tr>
<tr>
<td style="text-align:left">E.parent()</td>
<td style="text-align:left">获得E的父元素 B</td>
</tr>
<tr>
<td style="text-align:left">E.closest(A)</td>
<td style="text-align:left">向上获得指定的父元素，如果获得返回一个对象，如果没有返回没有对象0</td>
</tr>
<tr>
<td style="text-align:left">C.nextUntil(E)</td>
<td style="text-align:left">获得后面的所有兄弟，直到指定条件位置，DE</td>
</tr>
<tr>
<td style="text-align:left">F.prevUntil(D)</td>
<td style="text-align:left">获得前面的所有兄弟，直到指定条件位置 DE</td>
</tr>
<tr>
<td style="text-align:left">E.parents()</td>
<td style="text-align:left">获得所有的父元素 AB</td>
</tr>
<tr>
<td style="text-align:left">E.parentsUntil(B)</td>
<td style="text-align:left">查找所有的父元素，直到遇到指定条件的那个元素为止</td>
</tr>
<tr>
<td style="text-align:left">E.offsetParent()</td>
<td style="text-align:left">返回第一个定位的父元素</td>
</tr>
</tbody>
</table>
<p>closest和parents的主要区别是：</p>
<ul>
<li>1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；</li>
<li>2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；</li>
<li>3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择 id=two 所有子元素"  id="b1"/&gt;</span></div><div class="line">	$(<span class="string">"#b1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"#two"</span>).children().css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择 id=two 子元素title=other 元素 "  id="b2"/&gt;</span></div><div class="line">	$(<span class="string">"#b2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"#two"</span>).children(<span class="string">"[title='other']"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择 id=two 下一个兄弟"  id="b3"/&gt;</span></div><div class="line">	$(<span class="string">"#b3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"#two"</span>).next().css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择 id=two 后面的所有兄弟"  id="b4"/&gt;</span></div><div class="line">	$(<span class="string">"#b4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"#two"</span>).nextAll().css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择 id=two 上一个兄弟"  id="b5"/&gt;</span></div><div class="line">	$(<span class="string">"#b5"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"#two"</span>).prev().css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择 id=two 前面的所有兄弟"  id="b6"/&gt;</span></div><div class="line">	$(<span class="string">"#b6"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"#two"</span>).prevAll().css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择 id=two 所有兄弟"  id="b7"/&gt;</span></div><div class="line">	$(<span class="string">"#b7"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"#two"</span>).siblings().css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择 id=two 父元素"  id="b8"/&gt;</span></div><div class="line">	$(<span class="string">"#b8"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"#two"</span>).parent().css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>); </div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择title='tesst' 父元素body元素"  id="b9"/&gt;</span></div><div class="line">	$(<span class="string">"#b9"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"div[title='tesst']"</span>).closest(<span class="string">"body"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="串联"><a href="#串联" class="headerlink" title="串联"></a>串联</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">A.add(B)</td>
<td style="text-align:left">将A和B组装成一个对象。类型$(“A,B”)</td>
</tr>
<tr>
<td style="text-align:left">A.children().andSelf()</td>
<td style="text-align:left">将之前对象添加到操作集合中 孩子和A</td>
</tr>
<tr>
<td style="text-align:left">addBack()</td>
<td style="text-align:left">andSelf 1.8开始标记过时,addBack()取代</td>
</tr>
<tr>
<td style="text-align:left">contents()</td>
<td style="text-align:left">获得所有的子节点(子元素和文本)</td>
</tr>
<tr>
<td style="text-align:left">A.children().children().end()</td>
<td style="text-align:left">回到最近的一个”破坏性”操作之前</td>
</tr>
<tr>
<td style="text-align:left">A.孩子.孙子.end -&gt; 孩子</td>
<td style="text-align:left">A.孩子.孙子.end.end A</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择 id=one和two 的div"  id="b1"/&gt;</span></div><div class="line">	$(<span class="string">"#b1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="string">"#one"</span>).add(<span class="string">"#two"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择id=one 所有的孩子，以及one自己"  id="b2"/&gt;</span></div><div class="line">	$(<span class="string">"#b2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="comment">//$("#one").children().addSelf().css("background-color", "#FF0");</span></div><div class="line">		$(<span class="string">"#one"</span>).children().addBack().css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 选择id=one 所有的孩子，设置颜色为红，设置one自己为黄"  id="b3"/&gt;</span></div><div class="line">	$(<span class="string">"#b3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="comment">//$("#one").children().css("background-color", "#F00").end().css("background-color", "#FF0");</span></div><div class="line">		<span class="comment">//$("#one").children().css("background-color", "#F00").parent().css("background-color", "#FF0");</span></div><div class="line">		$(<span class="string">"#one"</span>).css(<span class="string">"background-color"</span>, <span class="string">"#FF0"</span>).children().css(<span class="string">"background-color"</span>, <span class="string">"#F00"</span>);</div><div class="line">	&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value=" 获得id=two 子节点个数"  id="b4"/&gt;	</span></div><div class="line">	$(<span class="string">"#b4"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		alert( $(<span class="string">"#two"</span>).contents().length );</div><div class="line">	&#125;);</div><div class="line">&#125;);</div><div class="line"><span class="string">``</span><span class="string">` </span></div><div class="line"><span class="string"></span></div><div class="line"><span class="string">### 筛选案例</span></div><div class="line"><span class="string">`</span><span class="string">``</span> javascript</div><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="comment">// 0 所有分组默认隐藏</span></div><div class="line">	<span class="comment">// 1 span可以点击 控制下面列表项的显示或隐藏</span></div><div class="line">	<span class="comment">// 2 当前分组列表项显示，其他分页隐藏（同时只有一个显示）</span></div><div class="line">	$(<span class="string">"div"</span>).children(<span class="string">"a"</span>).hide().prev(<span class="string">"span"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="keyword">this</span>).nextAll(<span class="string">"a"</span>).toggle().parent().siblings(<span class="string">"div"</span>).find(<span class="string">"a"</span>).hide();</div><div class="line">	&#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><h3 id="常见事件"><a href="#常见事件" class="headerlink" title="常见事件"></a>常见事件</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"></td>
<td style="text-align:left">带*表示jQuery提供额外事件，用于完善javascript缺失的</td>
</tr>
<tr>
<td style="text-align:left">blur()</td>
<td style="text-align:left">失去焦点</td>
</tr>
<tr>
<td style="text-align:left">change()</td>
<td style="text-align:left">改变</td>
</tr>
<tr>
<td style="text-align:left">click()</td>
<td style="text-align:left">单击</td>
</tr>
<tr>
<td style="text-align:left">dblclick()</td>
<td style="text-align:left">双击</td>
</tr>
<tr>
<td style="text-align:left">error()</td>
<td style="text-align:left">页面异常</td>
</tr>
<tr>
<td style="text-align:left">focus()</td>
<td style="text-align:left">获得焦点</td>
</tr>
<tr>
<td style="text-align:left">*focusin()</td>
<td style="text-align:left">获得焦点，可以在父元素上检测子元素获得的焦点的情况</td>
</tr>
<tr>
<td style="text-align:left">*focusout()</td>
<td style="text-align:left">失去焦点，可以在父元素上检测子元素失去焦点的情况</td>
</tr>
<tr>
<td style="text-align:left">keydown()</td>
<td style="text-align:left">键盘按下</td>
</tr>
<tr>
<td style="text-align:left">keypress()</td>
<td style="text-align:left">键盘按</td>
</tr>
<tr>
<td style="text-align:left">keyup()</td>
<td style="text-align:left">键盘弹起</td>
</tr>
<tr>
<td style="text-align:left">mousedown()</td>
<td style="text-align:left">鼠标按下</td>
</tr>
<tr>
<td style="text-align:left">*mouseenter()</td>
<td style="text-align:left">鼠标移入，只有鼠标穿过被选中元素才触发</td>
</tr>
<tr>
<td style="text-align:left">*mouseleave()</td>
<td style="text-align:left">鼠标移出，只有鼠标离开被选中元素时才触发</td>
</tr>
<tr>
<td style="text-align:left">mousemove()</td>
<td style="text-align:left">鼠标移动</td>
</tr>
<tr>
<td style="text-align:left">mouseout()</td>
<td style="text-align:left">鼠标移出</td>
</tr>
<tr>
<td style="text-align:left">mouseover()</td>
<td style="text-align:left">鼠标移入(悬浮)</td>
</tr>
<tr>
<td style="text-align:left">mouseup()</td>
<td style="text-align:left">鼠标弹起</td>
</tr>
<tr>
<td style="text-align:left">resize()</td>
<td style="text-align:left">改变大小(窗口)</td>
</tr>
<tr>
<td style="text-align:left">scroll()</td>
<td style="text-align:left">滚动(滚动条)</td>
</tr>
<tr>
<td style="text-align:left">select()</td>
<td style="text-align:left">选择</td>
</tr>
<tr>
<td style="text-align:left">submit()</td>
<td style="text-align:left">提交</td>
</tr>
<tr>
<td style="text-align:left">unload()</td>
<td style="text-align:left">页面卸载</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    $(<span class="string">"#e01"</span>).blur(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#textMsg"</span>).html(<span class="string">"文本框失去焦点：blur"</span>);</div><div class="line">    &#125;).focus(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#textMsg"</span>).html(<span class="string">"文本框获得焦点：focus"</span>);</div><div class="line">    &#125;).keydown(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#textMsg"</span>).append(<span class="string">"键盘按下：keydown"</span>);</div><div class="line">    &#125;).keypress(<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</div><div class="line">        $(<span class="string">"#textMsg"</span>).append(<span class="string">"键盘按：keypress"</span>);</div><div class="line">    &#125;).keyup(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#textMsg"</span>).append(<span class="string">"键盘弹起：keyup"</span>);</div><div class="line">    &#125;).select(<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</div><div class="line">        <span class="comment">//支持谷歌</span></div><div class="line">        <span class="keyword">var</span> sub = $(<span class="keyword">this</span>).val().substring(event.target.selectionStart,event.target.selectionEnd);</div><div class="line">        $(<span class="string">"#textMsg"</span>).html(<span class="string">"文本内容被选中：select ， "</span> + sub);</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    <span class="keyword">var</span> i = <span class="number">0</span>;</div><div class="line">    $(<span class="string">"#e02"</span>).mouseover(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#divMsg"</span>).html(<span class="string">"鼠标移上：mouseover"</span>);</div><div class="line">    &#125;).mousemove(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#divMsg"</span>).html(<span class="string">"鼠标移动：mousemove , "</span> + i++ );</div><div class="line">    &#125;).mouseout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#divMsg"</span>).html(<span class="string">"鼠标移出：mouseout"</span>);</div><div class="line">    &#125;).mousedown(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#divMsg"</span>).html(<span class="string">"鼠标按下：mousedown"</span>);</div><div class="line">    &#125;).mouseup(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#divMsg"</span>).html(<span class="string">"鼠标弹起：mouseup"</span>);</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    $(<span class="string">"#e03"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#buttonMsg"</span>).html(<span class="string">"单击：click"</span>);</div><div class="line">    &#125;).dblclick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">        $(<span class="string">"#buttonMsg"</span>).html(<span class="string">"双击：dblclick"</span>);</div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="页面加载"><a href="#页面加载" class="headerlink" title="页面加载"></a>页面加载</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">ready()</td>
<td style="text-align:left">页面加载</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 都执行了，类似队列</span></div><div class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"11"</span>);</div><div class="line">&#125;);</div><div class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"22"</span>);</div><div class="line">&#125;);</div><div class="line"><span class="comment">// js 只能执行一次，后面的覆盖前面的</span></div><div class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"1111"</span>);</div><div class="line">&#125;</div><div class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"2222"</span>);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="事件绑定"><a href="#事件绑定" class="headerlink" title="事件绑定"></a>事件绑定</h3><h4 id="处理"><a href="#处理" class="headerlink" title="处理"></a>处理</h4><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">bind(type,fn)</td>
<td style="text-align:left">给当前对象绑定一个事件。例如：A.bind(“click”,fn) 类似A.click(fn)</td>
</tr>
<tr>
<td style="text-align:left">unbind(type)</td>
<td style="text-align:left">解绑bind绑定事件</td>
</tr>
<tr>
<td style="text-align:left">one(type,fn)</td>
<td style="text-align:left">给当前对象绑定一次事件</td>
</tr>
<tr>
<td style="text-align:left">on(events,fn)</td>
<td style="text-align:left">提供绑定事件处理程序所需的所有功能。完成3个方法的功能：bind() delegate() live()</td>
</tr>
<tr>
<td style="text-align:left">off(events)</td>
<td style="text-align:left">解绑</td>
</tr>
<tr>
<td style="text-align:left">trigger(type)</td>
<td style="text-align:left">给每一个匹配的元素某类事件，例如A.trigger(“submit”) 类似A.submit()</td>
</tr>
<tr>
<td style="text-align:left">triggerHandler(type)</td>
<td style="text-align:left">给每一个匹配的元素某类事件，但不会执行<strong>浏览器默认动作</strong>，也不会产生<strong>事件冒泡</strong></td>
</tr>
</tbody>
</table>
<h4 id="委派"><a href="#委派" class="headerlink" title="委派"></a>委派</h4><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">live(type,fn)</td>
<td style="text-align:left">绑定事件，之后动态添加同样的成员，也具有同样的事件。</td>
</tr>
<tr>
<td style="text-align:left">die(type)</td>
<td style="text-align:left">解绑事件</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//  &lt;input id="h01" type="button" value="1只能点击一次，之后失效" /&gt; </span></div><div class="line">$(<span class="string">"#h01"</span>).one(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"只能看到你一次"</span>);</div><div class="line">&#125;);</div><div class="line"><span class="comment">//  &lt;input id="h02" type="button" value="2可以点击多次" /&gt; </span></div><div class="line"><span class="comment">// jQuery 事件别名，格式：事件.别名</span></div><div class="line">$(<span class="string">"#h02"</span>).bind(<span class="string">"click.a"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"每次都是你"</span>);</div><div class="line">&#125;);</div><div class="line">$(<span class="string">"#h02"</span>).bind(<span class="string">"click.b"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"怎么还是你"</span>);</div><div class="line">&#125;);</div><div class="line"><span class="comment">//  &lt;input id="h03" type="button" value="3解绑2" /&gt; </span></div><div class="line">$(<span class="string">"#h03"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">"#h02"</span>).unbind(<span class="string">"click.b"</span>);</div><div class="line">&#125;);</div><div class="line"><span class="comment">//  &lt;input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" /&gt; </span></div><div class="line">$(<span class="string">".myClass"</span>).live(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">"body"</span>).append(<span class="string">"&lt;input type='button' class='myClass'&gt;&lt;/input&gt;"</span>)</div><div class="line">&#125;);</div><div class="line"><span class="comment">//  &lt;input id="h05" type="button" value="5 解绑4"/&gt; 	</span></div><div class="line">$(<span class="string">"#h05"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">".myClass"</span>).die(<span class="string">"click"</span>);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h4 id="切换"><a href="#切换" class="headerlink" title="切换"></a>切换</h4><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">hover(over,out)</td>
<td style="text-align:left">简化版，鼠标移入和移除 A.mouseover(fn).mouseout(fn) 简化A.hover(fn,fn)</td>
</tr>
<tr>
<td style="text-align:left">toggle(fn,fn,fn,..)</td>
<td style="text-align:left">执行click事件，每点击一次执行一个fn</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">$(<span class="string">"#e01"</span>).toggle(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"0"</span>);</div><div class="line">&#125;, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"1"</span>);</div><div class="line">&#125;)</div><div class="line"></div><div class="line">$(<span class="string">"#e02"</span>).hover(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">"#divMsg"</span>).html(<span class="string">"over"</span>);</div><div class="line">&#125;, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">"#divMsg"</span>).html(<span class="string">"out"</span>);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="事件案例"><a href="#事件案例" class="headerlink" title="事件案例"></a>事件案例</h3><h4 id="文字提示跟随鼠标"><a href="#文字提示跟随鼠标" class="headerlink" title="文字提示跟随鼠标"></a>文字提示跟随鼠标</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 将自带提示，替换成自定义提示</span></div><div class="line">$(<span class="string">".mytooltip"</span>).mouseover(<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</div><div class="line">	<span class="comment">// 获得绑定的数据</span></div><div class="line">	<span class="keyword">var</span> title = $(<span class="keyword">this</span>).data(<span class="string">"mytitle"</span>);</div><div class="line">	<span class="keyword">if</span>( !title ) &#123;</div><div class="line">		<span class="comment">// 获得自带提示</span></div><div class="line">		<span class="keyword">var</span> title = $(<span class="keyword">this</span>).attr(<span class="string">"title"</span>);</div><div class="line">		<span class="comment">// 删除自带提示</span></div><div class="line">		$(<span class="keyword">this</span>).removeAttr(<span class="string">"title"</span>);</div><div class="line">		<span class="comment">// 绑定数据</span></div><div class="line">		$(<span class="keyword">this</span>).data(<span class="string">"mytitle"</span>,title);						</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	<span class="comment">// 创建div</span></div><div class="line">	<span class="keyword">var</span> $<span class="keyword">new</span> = $(<span class="string">"&lt;div id='tooltip'&gt;&lt;/div&gt;"</span>);</div><div class="line">	<span class="comment">// 设置提示</span></div><div class="line">	$<span class="keyword">new</span>.html(title);</div><div class="line">	<span class="comment">// 定位</span></div><div class="line">	$<span class="keyword">new</span>.offset(&#123;<span class="string">"left"</span>:event.pageX + <span class="number">5</span>,<span class="string">"top"</span>:event.pageY - <span class="number">20</span>&#125;);</div><div class="line">	<span class="comment">// 2 追加到body，并显示</span></div><div class="line">	$<span class="keyword">new</span>.appendTo(<span class="string">"body"</span>).show();</div><div class="line">&#125;).mouseout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">"#tooltip"</span>).remove();</div><div class="line">&#125;).mousemove(<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</div><div class="line">	<span class="comment">// 重新定位</span></div><div class="line">	$(<span class="string">"#tooltip"</span>).offset(&#123;<span class="string">"left"</span>:event.pageX + <span class="number">5</span>,<span class="string">"top"</span>:event.pageY - <span class="number">20</span>&#125;); </div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h4 id="简单图片放大镜效果"><a href="#简单图片放大镜效果" class="headerlink" title="简单图片放大镜效果"></a>简单图片放大镜效果</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> x = <span class="number">10</span>;</div><div class="line"><span class="keyword">var</span> y = <span class="number">20</span>;</div><div class="line"><span class="keyword">var</span> href;</div><div class="line"></div><div class="line">$(<span class="string">"a[class=tooltip]"</span>).mouseover(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</div><div class="line">	<span class="comment">//1 获取对应标签的自带提示</span></div><div class="line">	<span class="comment">//var title = $("a[class=tooltip]").attr("title");</span></div><div class="line">	<span class="comment">//this代表的是DOM对象(页面中的元素)</span></div><div class="line">	href = <span class="keyword">this</span>.href;</div><div class="line">	</div><div class="line">	<span class="comment">//删除自带提示</span></div><div class="line">	<span class="keyword">this</span>.href = <span class="string">""</span>;</div><div class="line">	</div><div class="line">	<span class="comment">//2 创建标签用于自定义提示</span></div><div class="line">	<span class="keyword">var</span> $div = $(<span class="string">"&lt;div id='tooltip'&gt;&lt;img src='"</span>+href+<span class="string">"'&gt;&lt;/img&gt;&lt;/div&gt;"</span>);</div><div class="line">	</div><div class="line">	<span class="comment">//3 将自定义提示的标签，添加到body标签下</span></div><div class="line">	$(<span class="string">"body"</span>).append($div);</div><div class="line">	</div><div class="line">	<span class="comment">//4 如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY)</span></div><div class="line">	$(<span class="string">"#tooltip"</span>).css(&#123;</div><div class="line">		<span class="string">"top"</span> : e.pageY + y + <span class="string">"px"</span>,</div><div class="line">		<span class="string">"left"</span> : e.pageX + x + <span class="string">"px"</span></div><div class="line">	&#125;).show(<span class="number">1000</span>);</div><div class="line">	</div><div class="line">&#125;).mouseout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="keyword">this</span>.href = href;</div><div class="line">	$(<span class="string">"#tooltip"</span>).remove();</div><div class="line">&#125;).mousemove(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</div><div class="line">	$(<span class="string">"#tooltip"</span>).css(&#123;</div><div class="line">		<span class="string">"top"</span> : e.pageY + y + <span class="string">"px"</span>,</div><div class="line">		<span class="string">"left"</span> : e.pageX + x + <span class="string">"px"</span></div><div class="line">	&#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="效果-动画"><a href="#效果-动画" class="headerlink" title="效果|动画"></a>效果|动画</h2><h3 id="基本"><a href="#基本" class="headerlink" title="基本"></a>基本</h3><p>通过改变元素 高度和宽度 进行显示或隐藏</p>
<table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">show(speed， fn)</td>
<td style="text-align:left">显示(速度[毫秒][显示的时间],回调)</td>
</tr>
<tr>
<td style="text-align:left">hide()</td>
<td style="text-align:left">隐藏</td>
</tr>
<tr>
<td style="text-align:left">toggle</td>
<td style="text-align:left">切换</td>
</tr>
</tbody>
</table>
<h3 id="滑动"><a href="#滑动" class="headerlink" title="滑动"></a>滑动</h3><p>通过改变元素 高度 进行显示或隐藏</p>
<table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">slideDown()</td>
<td style="text-align:left">显示</td>
</tr>
<tr>
<td style="text-align:left">slideUp()</td>
<td style="text-align:left">隐藏</td>
</tr>
<tr>
<td style="text-align:left">slideToggle()</td>
<td style="text-align:left">切换</td>
</tr>
</tbody>
</table>
<h3 id="淡入淡出"><a href="#淡入淡出" class="headerlink" title="淡入淡出"></a>淡入淡出</h3><p>通过改变元素 透明度 进行显示或隐藏</p>
<table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">fadeIn()</td>
<td style="text-align:left">显示</td>
</tr>
<tr>
<td style="text-align:left">fadeOut()</td>
<td style="text-align:left">隐藏</td>
</tr>
<tr>
<td style="text-align:left">fadeToggle()</td>
<td style="text-align:left">切换</td>
</tr>
<tr>
<td style="text-align:left">fadeTo()</td>
<td style="text-align:left">指定透明度</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">$(<span class="string">"#b1"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">"#b1Div"</span>).toggle(<span class="string">"1000"</span>);</div><div class="line">&#125;);</div><div class="line">$(<span class="string">"#b2"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">"#b2Div"</span>).slideToggle(<span class="string">"slow"</span>); </div><div class="line">&#125;);</div><div class="line">$(<span class="string">"#b3"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">"#b3Div"</span>).fadeToggle(<span class="string">"slow"</span>);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="ajax-请求"><a href="#ajax-请求" class="headerlink" title="ajax 请求"></a>ajax 请求</h2><p>ajax：异步请求，浏览器地址栏不改变，进行局部刷新。</p>
<table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">第一阶层</td>
<td style="text-align:left">第一阶层</td>
</tr>
<tr>
<td style="text-align:left">$.getJSON()</td>
<td style="text-align:left">可以完成js 跨域(域名+端口+项目) 请求，js默认不能跨域请求</td>
</tr>
<tr>
<td style="text-align:left">$.getScript()</td>
<td style="text-align:left">动态加载js文件，(原先的src=”” 直接同页面一起加载)</td>
</tr>
<tr>
<td style="text-align:left">第二阶层</td>
<td style="text-align:left">第二阶层</td>
</tr>
<tr>
<td style="text-align:left">$.load()</td>
<td style="text-align:left">开发常用</td>
</tr>
<tr>
<td style="text-align:left">$.get()</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">$.post()</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">第三阶层</td>
<td style="text-align:left">第三阶层</td>
</tr>
<tr>
<td style="text-align:left">$.ajax(…)</td>
<td style="text-align:left">最底层ajax请求，编写复杂，完成功能最全</td>
</tr>
</tbody>
</table>
<h3 id="servlet需要注意的事项"><a href="#servlet需要注意的事项" class="headerlink" title="servlet需要注意的事项"></a>servlet需要注意的事项</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 3.1 手动编写(一般使用工具类)</span></div><div class="line"><span class="comment">// String jsonData = "&#123;’message‘:’成功了‘&#125;"; // 畸形 json 格式</span></div><div class="line">String jsonData = <span class="string">"&#123;\"message\":\"成功了\"&#125;"</span>;</div><div class="line"></div><div class="line"><span class="comment">// 3.2 解决响应的中文乱码 &#123;"message":"???"&#125;</span></div><div class="line"><span class="comment">// response.setContentType("text/html;charset=UTF-8"); // html数据，不标准</span></div><div class="line">response.setContentType(<span class="string">"application/json;charset=UTF-8"</span>); <span class="comment">// 参见tomcat -&gt; web.xml配置文件</span></div><div class="line"></div><div class="line"><span class="comment">// 3.3 如果是 get 请求，必须手动解码</span></div><div class="line"><span class="keyword">new</span> String(username.getBytes(<span class="string">"ISO-8859-1"</span>), <span class="string">"UTF-8"</span>);</div></pre></td></tr></table></figure>
<h3 id="load-方法示例"><a href="#load-方法示例" class="headerlink" title="$.load()方法示例"></a>$.load()方法示例</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	$(<span class="string">"input"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="comment">// 0.1 请求路径</span></div><div class="line">		<span class="keyword">var</span> url = <span class="string">"/JQuery02/SendDataServlet"</span>;</div><div class="line">		<span class="comment">// 0.2 请求参数，采用json</span></div><div class="line">		<span class="keyword">var</span> params = &#123;<span class="string">"username"</span>:<span class="string">"杰克"</span>, <span class="string">"password"</span>:<span class="string">"1234"</span>&#125;;</div><div class="line">		<span class="comment">/* load()函数，必须使用jquery对象</span></div><div class="line"><span class="comment">			格式：load(url, [data]. [callback])</span></div><div class="line"><span class="comment">				参数1：url，请求路径</span></div><div class="line"><span class="comment">				参数2：data，请求参数</span></div><div class="line"><span class="comment">				参数3：callback，回调函数</span></div><div class="line"><span class="comment">			如果没有请求参数，发送GET请求</span></div><div class="line"><span class="comment">			如果有请求参数，发送POST请求，且请求没有中文乱码</span></div><div class="line"><span class="comment">			查看回调函数的参数(watch:arguments)：</span></div><div class="line"><span class="comment">				data：服务器响应的数据，load()永远model字符串，如果需要使用，必须手动转换json对象</span></div><div class="line"><span class="comment">				status: success成功，error错误</span></div><div class="line"><span class="comment">				ajax引擎 XHQ XMLHttpRequest</span></div><div class="line"><span class="comment">		*/</span></div><div class="line">		$(<span class="keyword">this</span>).load(url,params,<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">			<span class="keyword">var</span> jsonData = <span class="built_in">eval</span>(<span class="string">"("</span>+data+<span class="string">")"</span>);</div><div class="line">			alert(jsonData.message);</div><div class="line">		&#125;);</div><div class="line">	&#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="get-方法示例"><a href="#get-方法示例" class="headerlink" title="$.get()方法示例"></a>$.get()方法示例</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* 2 $.get() 全局函数 </span></div><div class="line"><span class="comment">	格式：jQuery.get(url, [data], [callback], [type])</span></div><div class="line"><span class="comment">		参数4: type，返回内容格式，xml, html, script, json, text, _default。</span></div><div class="line"><span class="comment">	GET 请求不适合发送中文数据，存在请求的中文乱码</span></div><div class="line"><span class="comment">		必须手动解码 new String(username.getBytes("ISO-8859-1"), "UTF-8");</span></div><div class="line"><span class="comment">	响应数据，如果使用标准的 application/json;charset=UTF-8， jQuery自动将数据转换成json对象。</span></div><div class="line"><span class="comment">	响应数据，如果使用畸形的 text/html;charset=UTF-8，回电函数获得字符串数据，需要手动转换。</span></div><div class="line"><span class="comment">		使用 参数4 ，设置json，jQuery将字符串转换成json对象</span></div><div class="line"><span class="comment">*/</span></div><div class="line">$.get(url,params,<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">	alert(data.message);</div><div class="line">&#125;, <span class="string">"json"</span>);</div></pre></td></tr></table></figure>
<h3 id="post-方法示例"><a href="#post-方法示例" class="headerlink" title="$.post()方法示例"></a>$.post()方法示例</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* 3 $.post() 全局函数 </span></div><div class="line"><span class="comment">jQuery.post(url, [data], [callback], [type])</span></div><div class="line"><span class="comment">*/</span></div><div class="line">$.post(url,params,<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">	alert(data);</div><div class="line">&#125;, <span class="string">"json"</span>);</div></pre></td></tr></table></figure>
<h3 id="ajax-方法实例-强大"><a href="#ajax-方法实例-强大" class="headerlink" title="$.ajax()方法实例(强大)"></a>$.ajax()方法实例(强大)</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* 4 $.ajax() 底层功能最强大的</span></div><div class="line"><span class="comment">	格式：jQuery.ajax(url,[settings])</span></div><div class="line"><span class="comment">		参数settings：设置所有的参数 http://jquery.cuishifeng.cn/jQuery.Ajax.html</span></div><div class="line"><span class="comment">		url: 发送请求的地址</span></div><div class="line"><span class="comment">		data: 发送到服务器的数据，请求参数</span></div><div class="line"><span class="comment">		type: 请求方式（"POST" 或 "GET"）</span></div><div class="line"><span class="comment">		success: 成功的回调函数 success(data, textStatus, jqXHR)</span></div><div class="line"><span class="comment">		error: 请求失败时的回调函数</span></div><div class="line"><span class="comment">		dataType: 预期服务器返回的数据类型</span></div><div class="line"><span class="comment">			”xml“：返回 XML 文档，可用 jQuery 处理</span></div><div class="line"><span class="comment">		...</span></div><div class="line"><span class="comment">*/</span></div><div class="line">$.ajax(&#123;</div><div class="line">	<span class="string">"url"</span>: url,</div><div class="line">	<span class="string">"data"</span>: params,</div><div class="line">	<span class="string">"type"</span>: <span class="string">"POST"</span>,</div><div class="line">	<span class="string">"success"</span>: <span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">			alert(data);</div><div class="line">	&#125;,</div><div class="line">	<span class="string">"error"</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		alert(<span class="string">"服务器繁忙，请稍后重试"</span>);</div><div class="line">	&#125;,</div><div class="line">	dataType:<span class="string">"json"</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="动态加载div"><a href="#动态加载div" class="headerlink" title="动态加载div"></a>动态加载div</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="comment">// 1 创建10个div</span></div><div class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++)&#123;</div><div class="line">		createDiv();</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	<span class="comment">// 2 浏览器添加滚动事件</span></div><div class="line">	$(<span class="built_in">window</span>).scroll(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="comment">// 2.1 滚过的高度</span></div><div class="line">		<span class="keyword">var</span> wt =  $(<span class="keyword">this</span>).scrollTop();</div><div class="line">		<span class="comment">// 2.2 整个文档高度</span></div><div class="line">		<span class="keyword">var</span> dh = $(<span class="built_in">document</span>).height();</div><div class="line">		<span class="comment">// 2.3 窗口的高度</span></div><div class="line">		<span class="keyword">var</span> wh = $(<span class="keyword">this</span>).height();</div><div class="line"></div><div class="line">		<span class="comment">// 3 当接近底部时，添加</span></div><div class="line">		<span class="keyword">if</span>(wt + wh + <span class="number">100</span> &gt; dh)&#123;</div><div class="line">			createDiv();</div><div class="line">			<span class="comment">// 发送ajax填充数据</span></div><div class="line">		&#125;</div><div class="line"></div><div class="line">		<span class="comment">// 提示 滚过高度到底部 + 窗口高度 = 整个文档高度</span></div><div class="line">		$(<span class="string">"#showDiv"</span>).html(<span class="string">"wt: "</span> + wt + <span class="string">",dh: "</span> + dh + <span class="string">",wh: "</span> + wh);</div><div class="line">	&#125;);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="comment">// 初始10个div</span></div><div class="line"><span class="keyword">var</span> num = <span class="number">1</span>;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">createDiv</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> $div = $(<span class="string">"&lt;div class='newDiv' /&gt;"</span>);</div><div class="line">	$div.html(num++);</div><div class="line">	$(<span class="string">"body"</span>).append($div);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="动态滚动"><a href="#动态滚动" class="headerlink" title="动态滚动"></a>动态滚动</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="comment">// 1 创建10个div</span></div><div class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++)&#123;</div><div class="line">		createDiv();</div><div class="line">	&#125;</div><div class="line">	<span class="comment">// 3 增加一个定时器，3秒执行一次</span></div><div class="line">	setInterval(showDiv, <span class="number">3</span>);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">showDiv</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="comment">// 2 将第一个隐藏，然后追到到尾部</span></div><div class="line">	$(<span class="string">"div:first"</span>).slideUp(<span class="number">1000</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		$(<span class="keyword">this</span>).appendTo(<span class="string">"body"</span>).slideDown(<span class="number">1000</span>);</div><div class="line">	&#125;);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">var</span> num = <span class="number">1</span>;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">createDiv</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> $div = $(<span class="string">"&lt;div class='newDiv' /&gt;"</span>);</div><div class="line">	$div.html(num++);</div><div class="line">	$(<span class="string">"body"</span>).append($div);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><h3 id="表单序列化"><a href="#表单序列化" class="headerlink" title="表单序列化"></a>表单序列化</h3><table>
<thead>
<tr>
<th style="text-align:left">语法</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$.ajaxSetup()</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">serialize()</td>
<td style="text-align:left">将表单中所有选中项拼凑成一个字符串，类似get请求参数</td>
</tr>
<tr>
<td style="text-align:left">serializeArray()</td>
<td style="text-align:left">将表单中所有选中项拼凑成一个json数组</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// alert($("form").serialize());</span></div><div class="line"><span class="comment">// user.jack&amp;password=1234</span></div><div class="line"><span class="comment">// serializeArray：</span></div><div class="line"><span class="comment">/*</span></div><div class="line"><span class="comment">[ </span></div><div class="line"><span class="comment">     &#123;name: 'firstname', value: 'Hello'&#125;, </span></div><div class="line"><span class="comment">     &#123;name: 'lastname', value: 'World'&#125;,</span></div><div class="line"><span class="comment">     &#123;name: 'alias'&#125;, // this one was empty</span></div><div class="line"><span class="comment">  ]</span></div><div class="line"><span class="comment">*/</span></div></pre></td></tr></table></figure>
<h3 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 事件冒泡：子元素事件执行时，一并触发父元素相同的事件</span></div><div class="line">$(<span class="string">"#outerDiv"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	alert(<span class="string">"outerDiv"</span>);</div><div class="line">&#125;);</div><div class="line">$(<span class="string">"#innerDiv"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</div><div class="line">	alert(<span class="string">"innerDiv"</span>);</div><div class="line">	<span class="comment">// 方式1：</span></div><div class="line">	<span class="comment">//return false;</span></div><div class="line">	<span class="comment">// 方式2：通过event 提供的函数</span></div><div class="line">	event.stopPropagation();</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h3 id="浏览器默认动作："><a href="#浏览器默认动作：" class="headerlink" title="浏览器默认动作："></a>浏览器默认动作：</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// &lt;a href="www.baidu.com"&gt;1111&lt;/a&gt;</span></div><div class="line"><span class="comment">// href a标签默认行为，阻止</span></div><div class="line">$(<span class="string">"a"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</div><div class="line">	alert(<span class="string">"hello"</span>);</div><div class="line">	<span class="comment">// 方式1：</span></div><div class="line">	<span class="comment">// return false;</span></div><div class="line">	<span class="comment">// 方式2：</span></div><div class="line">	event.preventDefault();</div><div class="line">&#125;);</div></pre></td></tr></table></figure>

        </div>

        <blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2017-11-13T14:17:25.621Z" itemprop="dateUpdated">2017年11月13日 22:17</time>
</span><br>


        如要转载请注明出处：<a href="/2017/08/01/jQuery_primary_02/" target="_blank" rel="external">http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/</a>
    </div>
    <footer>
        <a href="http://magic_duck.oschina.io">
            <img src="/img/avatar.jpg" alt="神奇的鸭鸭">
            神奇的鸭鸭
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/&title=《jQuery入门(二)》 — 神奇的鸭鸭の码农库&pic=http://magic_duck.oschina.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/&title=《jQuery入门(二)》 — 神奇的鸭鸭の码农库&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《jQuery入门(二)》 — 神奇的鸭鸭の码农库&url=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/&via=http://magic_duck.oschina.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2017/08/01/深入Web请求过程(读书)/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">深入Web请求过程(深入分析JavaWeb)</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/2017/07/30/jQuery_primary_01/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">jQuery入门(一)</h4>
      </a>
    </div>
  
</nav>



    







</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        我只要一角钱~ ~
        <i class="icon icon-quote-right"></i>
    </h3>
    <ul class="reward-items">
        
        <li>
            <img src="/img/wechat.png" title="微信打赏二维码" alt="微信打赏二维码">
            <p>微信</p>
        </li>
        

        
        <li>
            <img src="/img/alipay.jpg" title="支付宝打赏二维码" alt="支付宝打赏二维码">
            <p>支付宝</p>
        </li>
        
    </ul>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            <span><a href="" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            <span>博客内容遵循 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名 - 非商业性 - 相同方式共享 4.0协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p>
            <span>Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://git.oschina.net/z77z" target="_blank">邹海清</a></span>
            <span>神奇的鸭鸭の码农库 &copy; 2017</span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/&title=《jQuery入门(二)》 — 神奇的鸭鸭の码农库&pic=http://magic_duck.oschina.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/&title=《jQuery入门(二)》 — 神奇的鸭鸭の码农库&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《jQuery入门(二)》 — 神奇的鸭鸭の码农库&url=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/&via=http://magic_duck.oschina.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=http://magic_duck.oschina.io/2017/08/01/jQuery_primary_02/" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };



lazyScripts.push('//s95.cnzz.com/z_stat.php?id=1261081671&web_id=1261081671')

</script>

<script src="/js/main.min.js?v=1.4.3"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="/js/search.min.js?v=1.4.3" async></script>






<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>


</body>
</html>
